<template>
	<view class="pl30 pr30 ">
		<view class="topPlace"></view>
		<view class="text-center mb80 fs34 mt20 headertxt">
			<text>注册新账号</text>
		</view>
		<!-- 注册 -->
		<u-form :model="form" ref="uForm" label-position="top">
			<u-form-item label="手机号" prop="mobile">
				<u-input v-model="form.mobile" placeholder="请输入手机号" />
			</u-form-item>
			<u-form-item label="验证码" prop="code">
				<u-input v-model="form.code" placeholder="请输入验证码" />
				<text slot='right' class="captcha" @tap="getCode">{{tips}}</text>
			</u-form-item>
			<u-form-item label="密码" prop="password">
				<u-input v-model="form.password" type="password" placeholder="请输入密码" />
			</u-form-item>
			<u-form-item label="确认密码" prop="password">
				<u-input v-model="form.confirmPassword" placeholder="请输入密码" type="password"/>
			</u-form-item>
<!-- 			<u-form-item label="邀请码" prop="invitation_code">
				<u-input v-model="form.invitation_code" placeholder="请输入企业邀请码（选填）" />
			</u-form-item> -->
		</u-form>
		<view class="agreement mt46">
			<u-checkbox v-model="check" @change="check=true" shape="circle"></u-checkbox>
			<text class="agreement-text" >
				我已同意《预订美好APP》<text @click.stop="$jump('/pages/register/zhucexieyi?from=1')" style="color: #1385FF;">注册协议</text>
				和
				<text @click.stop="$jump('/pages/register/zhucexieyi?from=2')" style="color: #1385FF;">隐私协议</text>
			</text>
		</view>
		<view class="mt152 pl40 pr40">
			<u-button @click="submit" type="primary">注册</u-button>
		</view>
		<u-verification-code :seconds="60" ref="uCode" @change="codeChange" unique-key="login" :keep-running="true">
		</u-verification-code>
	</view>
</template>

<script>
		import getcode from '@/mixins/getcode.js'
	export default {
		name: 'Register',
		//获取验证码
		mixins:[getcode],
		data() {
			return {
				tips: '获取验证码', //获取验证码
				//form表单
				form: {
					mobile: '',
					code: '',
					password: '',
					confirmPassword:'',
					invitation_code: '',
				},
				rules: {
					mobile: [{
						required: true,
						message: '请输入手机号',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur'
					}],
					code: [{
						required: true,
						message: '验证码',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: '请输入密码',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur'
					}],
				},
				check: false
			};
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			// 发起注册请求
			submit() {
				if (!this.form.mobile) {
					return this.$msg('手机号不能为空')
				}
				if (!this.form.code) {
					return this.$msg('验证码不能为空')
				}
				if (!this.form.password) {
					return this.$msg('密码不能为空')
				}
				if(this.form.password!=this.form.confirmPassword) {
					return this.$msg('两次密码不一致')
				}
				if (!this.check) {
					return this.$msg('请勾选注册协议')
				}
				this.$refs.uForm.validate(async valid => {
						if (valid) {
							console.log('验证通过');
							this.$api.register(this.form).then(res => {
								this.$msg(res.msg)
								// 请求成功跳转到登录页面
								setTimeout(() => {
									uni.navigateTo({
										url: '/pages/login/login'
									})
								}, 1000)
							})
						} else {
							console.log('验证失败');
						}
					});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: url(../../static/img/index/loginbg.png) no-repeat;
		background-size: 100% auto;
	}

	.captcha,
	.register,
	.agreement-text {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: bold;
		text-decoration: underline;
		color: #1385FF;
	}

	.register {
		color: #6D788B;
	}

	.agreement-text {
		font-size: 22rpx;
		color: #6D788B;
		text-decoration: none;
	}
</style>
